<template>
  <div class="">
    <ul class="list-wrap" @click="handleUlClick">
      <li v-for="(v, i) in data" :key="i" :data-id="i" class="list-item">
        <span>{{v}}</span>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref} from 'vue'
import dayjs from 'dayjs'

interface Props {
  label?: string
  data: any[]
}
const emit = defineEmits(['itemClick'])
const props = withDefaults(defineProps<Props>(), {
  label: '列表组件',
  data: () => []
})

const handleUlClick = (e: any) => {
  let tag = e.target;
  let id = tag.getAttribute('data-id') // 这是重点
  // console.log(tag)
  // console.log(props.data[id])
  // TODO: 点击的行进行变色 
  // tag.style.backgroundColor = '#f00'
  emit('itemClick', props.data[id])
}






</script>
<style lang="scss" scoped>
.list-wrap {
  flex: auto;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  border: 1px solid #d9d9d9;
  .list-item {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    line-height: 20px;
    transition: all .3s;
    &:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }
  }
}
</style>